<template>
  <div id="app">
    <div>
      <input type="file" @change="selectPic()" id="picInput" accept="image/*" />
      <input v-model="Phone" />
      <input v-model="Time" />
      <div id="pic_box">
        <img id="show" />
        <div class="mark_wrap" id="mark_wrap">
          <div class="mark_box" id="mark_box">
            <div class="left">
              <div class="info_item">{{ Phone }}</div>
              <div class="info_item_b" id="ctime">{{ Time }}</div>
            </div>
            <div class="right">
              <div>
                <img
                  class="logo"
                  src=""
                />
              </div>
              <div class="info">
                <div class="info_item">
                  <span style="margin-right: 8px">f/1.85</span
                  ><span style="margin-right: 8px"> 1/100</span>ISO81
                </div>
                <div class="info_item_b">
                  <span style="margin-right: 2px">29</span>
                  <div class="point point1">。</div>
                  <span style="margin-right: 2px">52</span>
                  <div class="point point2">'</div>
                  <span style="margin-right: 2px">8</span>
                  <div class="point point3">"</div>
                  <span style="margin-right: 8px">N</span>
                  <span style="margin-right: 2px">121</span>
                  <div class="point point4">。</div>
                  <span style="margin-right: 2px">31</span>
                  <div class="point point5">'</div>
                  <span style="margin-right: 2px">50</span>
                  <div class="point point6">"</div>
                  <span>E</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div id="canvas"></div>
      <img src="" alt="" id="canvasPic" crossorigin="anonymous" />
    </div>
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'
import html2canvas from 'html2canvas';
export default {
  name: 'App',
  components: {
    // HelloWorld
  },
  data() {
    return {
      Phone: ' XIAOMI 12S ULTRA',
      Time: '2022.07.06 11:48:55',
      PIC: {
        file: '',
        width: '',
        height: '',
        size: '',
        lastModifiedDate: ''
      }
    };
  },
  methods: {
    selectPic() {
      const picInput = document.querySelector('#picInput')
      this.PIC.file = picInput.files[0]
      this.PIC.size = this.PIC.file.size
      const time = this.PIC.file.lastModifiedDate
      const years = time.getFullYear()
      const month = (time.getMonth() + 1 + '').padStart(2, 0)
      const day = (time.getDate() + '').padStart(2, 0)
      const hour = (time.getHours() + '').padStart(2, 0)
      const minute = (time.getMinutes() + '').padStart(2, 0)
      const second = (time.getSeconds() + '').padStart(2, 0)
      this.PIC.lastModifiedDate = `${years}.${month}.${day} ${hour}:${minute}:${second}`
      this.main()
    },
    fileToBase64(file) {
      return new Promise((resolve, reject) => {
        const fileReader = new FileReader()
        fileReader.onload = () => resolve(fileReader.result)
        fileReader.onerror = err => reject(err)
        fileReader.readAsDataURL(file)
      })
    },
    getPicWH(src) {
      return new Promise((resolve, reject) => {
        const img = new Image()
        img.src = src
        img.onload = () => {
          resolve({
            width: img.width,
            height: img.height
          })
        }
        img.onerror = err => reject(err)
      })
    },
    toCanvas() {
      html2canvas(document.querySelector('#pic_box'), {
        width: this.PIC.width,
        height: this.PIC.height + 185,
        allowTaint: true,
        useCORS: true
      })
        .then(canvas => {
          // document.querySelector('#canvas').appendChild(canvas)
          document.querySelector('#pic_box').style.display = 'none'
          document.querySelector('#canvasPic').src = canvas.toDataURL()
        })
    },
    async main() {
      const base64 = await this.fileToBase64(this.PIC.file)
      const {
        width,
        height
      } = await this.getPicWH(base64)

      if (width < 600) {
        return alert('图片宽度过小')
      }
      const show = document.querySelector('#show')
      const ctime = document.querySelector('#ctime')
      const markWrap = document.querySelector('#mark_wrap')
      // const picBox = document.querySelector('#pic_box')

      // 保存图片信息
      this.PIC.width = width
      this.PIC.height = height
      this.PIC.base64 = base64
      // 显示图片
      show.src = this.PIC.base64
      show.style.width = this.PIC.width + 'px'
      show.style.height = this.PIC.height + 'px'
      // 时间
      ctime.innerHTML = this.PIC.lastModifiedDate
      // 设置宽度
      markWrap.style.width = this.PIC.width - 100 + 'px'
      this.toCanvas()
    }
  }
}
</script>

<style>
* {
  padding: 0;
  margin: 0;
}

body {
  /* background-color: yellowgreen; */
  /* overflow: hidden; */
}

.mark_wrap {
  height: 185px;
  /* width: 100%; */
  /* border: 1px solid royalblue; */
  display: flex;
  align-items: center;
  padding: 0 50px;
}

.mark_box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.right {
  display: flex;
  align-items: center;
}

.info {
  border-left: 3px solid #d0d0d0;
  margin-left: 20px;
  padding-left: 20px;
}

.info_item {
  /* font-family: 'Trebuchet
      MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; */
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #030303;
}

.info_item_b {
  margin-bottom: 10px;
  color: #878787;
  position: relative;
  /* font-size: 14px;
      */
}

.logo {
  width: 80px;
}

.point {
  position: absolute;
}

.point1 {
  top: -10px;
  left: 19px;
}

.point2 {
  top: 0px;
  left: 45px;
}

.point3 {
  top: 0px;
  left: 60px;
}

.point4 {
  top: -10px;
  left: 120px;
}

.point5 {
  top: 0px;
  left: 147px;
}

.point6 {
  top: 0px;
  left: 172px;
}
</style>
